import React, { Component } from 'react';
import { Card  ,Button  } from 'antd';
import { connect } from 'dva';
import { Table, Divider, Tag } from 'antd';
import { List, Avatar, Icon } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import styles from './index.less';
const namespace = 'listimages';
const ButtonGroup = Button.Group;

const listData = [];
for (let i = 0; i < 23; i++) {
  listData.push({
    url: 'http://ant.design',
    name: `ant design part ${i}`,
    avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
    description:
      'Ant Design, a design language for background applications, is refined by Ant UED Team.',
    content:
      'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
  });
}

const IconText = ({ type, text }) => (
  <span>
    <Icon type={type} style={{ marginRight: 8 }} />
    {text}
  </span>
);

const details = {
    id: '4',
    name: 'Joe Black',
    url: 56,
    description: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
}

const mapStateToProps = (state) => {
  const cardList = state[namespace].data;
  return {
    cardList,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    onDidMount: () => {
      dispatch({
        type: `${namespace}/listImage`,
        payload: {'ddd':"ddddd"},
      });
    },
  };
};

@connect(mapStateToProps, mapDispatchToProps)
export default class PuzzleCardsPage2 extends Component {
  componentDidMount() {
    this.props.onDidMount();
  }
  render() {
    return (
    <PageHeaderWrapper content="这是一个新页面，从这里进行开发！" className={styles.main}>

      
      <div>            
		<List
    itemLayout="vertical"
    size="large"
    pagination={{
      onChange: page => {
        console.log(page);
      },
      pageSize: 3,
    }}
    dataSource={this.props.cardList}
    footer={
      <div>
        <b>ant design</b> footer part
      </div>
    }
    renderItem={item => (
      <List.Item
        key={item.title}
        actions={[
          <IconText type="star-o" text="156" key="list-vertical-star-o" />,
          <IconText type="like-o" text="156" key="list-vertical-like-o" />,
          <IconText type="message" text="2" key="list-vertical-message" />,
        ]}
        extra={
         
          <a> item.url</a>
        }
      >
        <List.Item.Meta
          avatar={<Avatar src={item.avatar} />}
          title={<a href={item.url}>{item.name}</a>}
          description={item.description}
          url = {<a>item.url</a>}
        />
        {item.content}
      </List.Item>
    )}
  />
      </div>
      </PageHeaderWrapper>
    );
  }
}